<template>
    <div class="register-box flex-col-center">
        <div class="register-container flex-row-center"  >
            <BackButton text="返回首页">返回</BackButton>
            <div class="register-item flex-col-center register-item-left">
             <el-image src="https://p6.itc.cn/q_70/images03/20211209/7d3744200b1e4e37ae6b364cf2638ca6.jpeg"></el-image>
            </div>
            <div class="register-item flex-col-center register-item-right">
              <p>注册</p>
<!--                注册页面 -->
              <el-form :model="form" status-icon :rules="rules"
                       :show-message="true"
                       :inline-message="false"
                       ref="form"
                       label-width="0px"
                       class="register-form">
                <el-form-item  prop="userName">
                  <el-input placeholder="4~13位 数字" prefix-icon="el-icon-user-solid" type="text" v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                  <el-input placeholder="5~17位 字母+数字" prefix-icon="el-icon-lock" show-password type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  prop="checkPassword">
                  <el-input placeholder="重复密码" prefix-icon="el-icon-refresh-right" show-password type="password" v-model="form.checkPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="flex-row-center">
                  <MiButton1 @click="handleSubmit" style="width: 150px">登录</MiButton1>
                </el-form-item>
              </el-form>
<!--                下方功能选项-->
                <div class="register-menu-box flex-row-between" >
                    <el-link type="primary" href="/forget">忘记密码</el-link>
<!--                    QQ、手机、邮箱注册-->
                    <IconBox :list="otherMethod" name="其他注册方式:" @change="handleOtherMethodClicked"></IconBox>

                    <el-link type="primary" href="/login">已有账号？登录</el-link>
                </div>

            </div>
            <div>
            </div>
        </div>
    </div>

</template>

<script>
    import {userRequest} from "@/api/user";

    import BackButton from "@/components/button/BackButton";
    import {isPhone} from "@/util/common";
    import IconBox from "@/components/common/IconBox";
    import MiButton1 from "@/components/button/MiButton1.vue";

    export default {
        name: "Register",
        components: {MiButton1, IconBox, BackButton},
        data(){

          let userNameRegex="^[0-9]{4,13}$"
          let passwordRegex="^[a-zA-Z]\\w{5,17}$"
          let validateUserName=(rules,value,callback)=>{
            //TODO 请求是否存在该账号
            // userRequest.getUserByUserName()
            if(!value.match(userNameRegex)){
              return callback(new Error("账号长度 4 ~ 13 位数字 "))
            }
            callback()
          }
          let validatePassword=(rules,value,callback)=>{
            if(!value.match(passwordRegex)){
              return callback(new Error("格式:5~17位 字母+数字"))
            }
            callback()
          }
          let validateCheckPassword=(rules,value,callback)=>{
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          }

            return {

                form: {
                    userName: "",
                    password: "",
                    userNick:"",
                    email:"",
                    mobile:"",
                    schoolId:0,
                    headPortrait:""
                },
                obj:{
                    activeStep:2
                },
                otherMethod:[
                    {
                        title:"手机",
                        content:"<svg t=\"1665811425061\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"16851\" width=\"128\" height=\"128\"><path d=\"M805.8 928.2H218.4c-21.2 0-38.6-17.4-38.6-38.6V136.8c0-21.2 17.4-38.6 38.6-38.6h587.4c21.2 0 38.6 17.4 38.6 38.6v752.8c0 21.2-17.4 38.6-38.6 38.6z\" fill=\"#6F82A3\" p-id=\"16852\"></path><path d=\"M256.4 209.1h512.7v622.6H256.4z\" fill=\"#A6B5D4\" p-id=\"16853\"></path><path d=\"M512.3 880.3m-23.3 0a23.3 23.3 0 1 0 46.6 0 23.3 23.3 0 1 0-46.6 0Z\" fill=\"#576883\" p-id=\"16854\"></path><path d=\"M640.8 159.3H383.2c-6.6 0-12-5.4-12-12v-2c0-6.6 5.4-12 12-12h257.5c6.6 0 12 5.4 12 12v2c0.1 6.6-5.3 12-11.9 12z\" fill=\"#576883\" p-id=\"16855\"></path></svg>",

                    },
                    {
                        title:"Email",
                        content:"<svg t=\"1665811445873\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"17830\" width=\"128\" height=\"128\"><path d=\"M801.142 232h-579.04l289.52 299.86L801.142 232zM136 234.963V792h752V234.18L534.643 600.157a32 32 0 0 1-0.794 0.794c-12.714 12.275-32.972 11.92-45.248-0.794L136 234.963zM96 160h832c17.673 0 32 14.327 32 32v640c0 17.673-14.327 32-32 32H96c-17.673 0-32-14.327-32-32V192c0-17.673 14.327-32 32-32z\" fill=\"#5090F1\" p-id=\"17831\"></path></svg>\n"

                    },
                    {
                        title:"QQ",
                        content:"<svg t=\"1665811399441\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"15874\" width=\"128\" height=\"128\"><path d=\"M68.399765 590.615655c-37.073602 90.765025-43.465533 176.418105-14.062849 191.757941 20.45478 11.505876 53.692423-14.061849 84.374094-60.084355 11.504876 51.135451 42.186547 95.87897 84.373094 132.952572-44.743519 16.619821-74.146204 44.743519-74.146204 75.42519 0 51.135451 79.259149 93.321998 176.418105 93.321997 88.208052 0 161.07627-33.237643 175.138119-77.982162h20.45478C535.009753 990.751357 607.87897 1023.989 696.087023 1023.989c98.436943 0 176.418105-40.908561 176.418104-93.321997 0-30.68167-29.402684-58.806368-74.146203-75.42519 42.186547-37.073602 72.868217-81.817121 84.374094-132.952572 30.68067 46.022506 62.640327 71.589231 84.373093 60.084355 30.68167-15.339835 24.289739-102.270901-14.061849-191.757941-29.403684-70.311245-69.033258-122.725682-99.714929-134.230558 0-3.835959 1.278986-8.949904 1.278987-14.062849 0-26.845712-7.669918-52.413437-20.454781-72.868217v-5.112945c0-12.783863-2.555973-24.289739-7.669917-34.516629C818.813704 145.736434 701.200968 0 510.722014 0 320.24206 0 202.630323 145.736434 194.959406 329.824457c-5.112945 10.22689-7.669918 21.732767-7.669918 34.516629v5.112945c-12.783863 20.45478-20.45478 46.022506-20.45478 72.869217v14.061849c-28.123698 11.504876-69.032258 62.640327-98.434943 134.230558z\" fill=\"#4CAFE9\" p-id=\"15875\"></path></svg>\n"

                    }
                ],
              rules:{
                userName:[
                  {validator: validateUserName, trigger: 'blur'}
                ],
                password:[
                  {validator:validatePassword,trigger: 'blur'}
                ],
                checkPassword:[
                  {validator:validateCheckPassword,trigger: 'blur'}
                ]
              }
            }
        },
        computed:{
            isPC(){
                // let phone=isPhone()
                // if(!phone){
                //     return '100vh'
                // }
                // return ''
          }
        },
        methods: {
          handleSubmit() {
            console.log("aa")
          },
          handleOtherMethodClicked(item) {
            console.log(item)
          }
        }
    }
</script>

<style scoped lang="less">
    .register-box{
        width: 100%;
        height: 100vh;
        background-image: url("@/static/img/register/registerBackground.jpg") ;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;

        overflow-x: hidden;


        .register-container{
            width: 50%;
            height: 70%;
            min-width: 350px;
            border-radius: 5px;
            //background-color: rgba(255,255,255,0.8);
            padding: 10px;
            background-color: #2B323D;
            color:#07897D;
            font-size: 20px;
            .register-item{
              flex: 1;
              height: 100%;
              transition: all 0.3s;
            }
            .register-item-left{
              .el-image{
                width: 80%;
                border-radius: 5px;
                overflow: hidden;
              }
              border-radius: 5px;
              //box-shadow: 0 2px 12px 0 rgba(1,172,172,0.8);
            }
            .register-item-right{
              padding: 10px;
              .register-form{
                width: 90%;
              }
              .register-menu-box{
                width: 100%;
                margin-top: 20px;
                flex-wrap: wrap;
                font-size: 16px;
              }
            }

        }
    }
</style>